/**
 * @module 会员卡列表
 * @author xiongsha
 * @date 2021-01-07 17:25:47
 */
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Toast } from 'antd-mobile';
import request from '@src/utils/request';
import './index.less';

interface ILevels {
  id?: number;
  begin_at?: string;
  content?: string;
  end_at?: string;
  name?: string;
  logo?: string;
  times?: number;
}
interface IUser {
  account?: string;
  avatar?: string;
  bound_phone?: boolean;
  bound_wechat?: boolean;
  image?: string;
  levels?: ILevels[];
  nickname?: string;
  phone?: string;
  background?: string;
}

const VipList: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
  const [user, setUser] = useState<IUser>({});
  const getUser = () => {
    request('get', '/api/v1/user').then((res) => {
      if (res && res.code === 200) {
        const { data } = res;
        if (!data.bound_phone) {
          props.history.replace('/login');
          return;
        } else {
          setUser(data);
        }
      } else {
        Toast.fail(res.message);
      }
    });
  };
  const getCode = () => {
    // 获取微信code
    // http://tianrui.vic0922.top/api/v1/socials/oauth
    const openid = localStorage.getItem('openid');
    const token = localStorage.getItem('token');
    if (openid && token) {
      // 如果有openid且有token
      getUser();
      return;
    }
    let { search } = location;
    let seaechArr = search.split('&');
    seaechArr = seaechArr[0].split('=');
    const code = seaechArr[1];
    if (!openid && !code) {
      location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9f0af8e61b261be9&redirect_uri=http%3a%2f%2ftianrui.vic0922.top%2f&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    }
    request('post', '/api/v1/socials/authorizations', {
      code: openid ? undefined : code,
      openid,
    }).then((res) => {
      if (res && res.code === 200) {
        localStorage.setItem('token', res.data.access_token);
        localStorage.setItem('openid', res.data.openid);
        localStorage.setItem('time', res.data.expiration);
        getUser();
      }
    });
  };
  useEffect(() => {
    getCode();
  }, []);
  return (
    <div
      className="vip-list"
      style={{
        backgroundImage: `url(${user.background})`,
      }}
    >
      <div className="vip-content">
        <p className="vip-title">会员图片</p>
        {user.image ? (
          <div className="user-img">
            <img src={user.image} alt="" />
          </div>
        ) : null}
        <p className="vip-title">会员列表</p>
        {user.levels &&
          user.levels.map((cur, index) => (
            <div
              onClick={() => props.history.push(`/vip/detail/${cur.id}`)}
              className={cur.logo ? 'list' : 'list-bgc list'}
              key={index}
            >
              <img className="list-logo" src={cur.logo} alt="" />
              <p className="vip-name">{cur.name}</p>
              {cur.times !== null ? <p className="vip-desc">剩余次数：{cur.times}</p> : null}
              <p className="vip-desc vip-time">有效期至：{cur.end_at}</p>
            </div>
          ))}
      </div>
    </div>
  );
};

export default VipList;
